$activity-avatar-size: 100px;
$activity-container-height: 80px;
$activity-name-height: $lh-large;
$indicators_height: $activity-container-height - $activity-name-height;
$indicator_item_height: $indicators_height / 2;
$activity_border_size: 5px;

.activity-family {
  .activity-family-heading {
    margin: $default-gap * 2;
    .activity-family-title {
      font-size: $fs-large;
      line-height: $lh-large;
      border-bottom: $menu-border;
    }
  }
  .activity-family-body {
    margin: $default-gap * 2;
    @include clearfix;
  }
}

.activity-containers {
  @include make-row;
  margin-left: 0;
  margin-right: 0;
  .activity-container {
    @include float(left);
    @include make-xs-column(12);
    @include make-sm-column(6);
    @include make-md-column(6);
    @include make-lg-column(4);
    padding: 0;
  }
}


.procedure-dropdown {
  margin: $default-gap;
  .btn {
    min-width: 20em;
  }
}


.activity {
  @include normal-shadow();
  @include box-sizing(border-box);
  margin: 2 * $default-gap;
  background: #FFF;
  @include transition(background-color 0.2s);
  @include border-right($default-gap solid $neutral-background);

  //@include box-sizing(border-box);
  // height: $activity-container-height;
  @include clearfix;

  .activity-avatar {
    background-color: $neutral-background;
    @include background-size(cover);
    width: $activity-avatar-size;
    height: $activity-avatar-size;
    @include float(left);
  }

  .activity-content {
    @include calc(width, "100% - #{$activity-avatar-size}");
    @include float(left);
    padding: $default-gap $default-gap * 2;
    box-sizing: border-box;

    .activity-name {
      @include ellipsis;
      &, * {
        height: $activity-name-height;
        line-height: $lh-large;
        font-size: $fs-large;
      }
      margin-bottom: 2 * $default-gap;
    }

    .activity-indicators {
      @include make-row($gutter: 0);
      // height: $indicators_height;

      .activity-indicator {
        @include ellipsis;
        @include make-md-column(4, $gutter: 0);
        // height: 100%;
        text-align: center;
        font-size: $fs-normal;
        // line-height: $indicators_height;
        &.cash {
          @include make-md-column(12, $gutter: 0);
          @include icon-before(money, $font-size: $fs-normal);
        }
      }
    }
  }
  &.inactive {
    opacity: 0.5;
    background: $desktop-background;
    &:hover {
      opacity: 1;
      background: white;
    }
  }

  .cumulated-time {
    @include icon-before(timelapse, $font-size: $fs-normal);
  }

  .opened-issues {
    @include icon-before(bug, $font-size: $fs-normal);
  }

  .size {
    @include icon-before(settings-ethernet, $font-size: $fs-normal);
  }

}

$chronology-background-color: #EEE;
.chronology {
  overflow: hidden;

  .grades {
    display: flex;
    height: $lh-normal;
    position: relative;
    .grade {
      flex: 1;
      font-size: $fs-small;
      font-weight: bold;
      text-transform: uppercase;
      color: $neutral-color;
      @include inline-block;
      @include padding-left($default-gap);
      &.grade-start {
        @include border-left($menu-border);
      }
      &.grade-month {
        color: darken($chronology-background-color, 5%);
      }
    }
  }
  .periods {
    position: relative;
    height: $lh-large;
    background-color: $chronology-background-color;
    @include border-radius($default-border-radius);
    .period {
      position: absolute;
      height: inherit;
      background-color: $active-color;
      @include border-radius($default-border-radius);
      &.rounded {
        @include border-radius(3 * $default-border-radius);
      }
      &.without-left {
        @include border-left-radius(0);
      }
      &.without-right {
        @include border-right-radius(0);
      }
    }

    .markers {
      height: 100%;
      width: 100%;
      @include flex-column();

      .marker {
        @include flex-column();
        position: absolute;
        height: $lh-normal;
        box-shadow: 1px 1px #e4e3e3;
        width: $lh-normal;
        @include border-radius($lh-normal);
        background-color: $white;
        @include flex-column(flex);

        .picto {
          min-width: 0;
          line-height: 0;
          font-size: $fs-normal;
          color: $text-color;
        }
      }

      .interventions {
        flex: 1;
        width: 100%;
        height: 100%;
      }

      .crop-management-technique {
        flex: 1;
        width: 100%;
        height: 100%;

        .period {
          @include flex-row();
          height: initial;
        }

        .marker {
          position: initial;
        }
      }
    }
  }
}

.activity-productions {
  @include clearfix;
  .activity-production {
    margin: 2 * $default-gap;
  }
}
